<template>
    <div class="type">
        <Top text="商品分类"/>
        <div class="wrap">
            <div class="left">
                <div  
                v-for="(item,index) in brand" :key="index"
                @click = 'changType(item,index)'
                :class = 'num === index ? "active" : "item"'
                >
                    {{item}}
                </div>
            </div>
            <div class="right">
                <List :data="brandGoods"/>
            </div>
        </div>
    </div>
</template>

<script>
    import List from '@/views/Type/List'
    import {mapState} from 'vuex'
    export default {
        name:"Type-Vue",
        components:{ List },
        data(){
            return {
                brand:['乐百氏','君山山泉','怡宝','深岩','农夫山泉','益力','古谷','冰露'],
                num: JSON.parse(localStorage.getItem('typeIndex')) || 0,
                item:'',
            }
        },
        methods:{
            changType(item,index){
                this.num = index
                localStorage.setItem('typeIndex',JSON.stringify(this.num))
                this.$store.dispatch('Type/getBrandGoods',item)
            }
        },
        computed:{
            ...mapState('Type',['brandGoods'])
        },
        mounted() {
            this.$store.dispatch('Type/getBrandGoods',this.brand[this.num])
        },

    }
</script>

<style scoped lang="less">
    .wrap{
        width: 100%;
        height: 90vh;
        display: flex;

        .left{
            width: 25%;
            background: #eeecec;

            .item{
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #6d6d6d;
                // font-weight: 600;
                font-size: 12px;
                transition: .3s;
            }

            .active{
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #333;
                // font-weight: 600;
                font-size: 14px;
                background: rgb(255, 255, 255);
                border: 0.5px solid rgb(247, 244, 244);
                
            }
        }


        .right{
            width: 75%;
        }
    }
</style>